<template>
    <div>
        <el-container>
            <el-header style="height: 50px">
                <el-avatar icon="el-icon-user-solid"></el-avatar>
            </el-header>
            <el-container>
                <el-aside width="200px" style="height: 100%; overflow: hidden;
                            position: relative;background-color:#304156" >
                    <el-menu
                            default-active="2"
                            @open="handleOpen"
                            @close="handleClose"
                            @select="handleSelect"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b">
                        <el-menu-item index="1" style="padding-left: 20px; color: rgb(64, 158, 255); background-color: rgb(48, 65, 86);">
                            <i class="el-icon-document"></i>
                            <span slot="title">房态</span>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">预订</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-document"></i>
                            <span slot="title">入住</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-document"></i>
                            <span slot="title">退房</span>
                        </el-menu-item>
                        <el-submenu index="5">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>房间</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="5-1">房间总览</el-menu-item>
                                <el-menu-item index="5-2">房间清洁</el-menu-item>
                                <el-menu-item index="5-3">房间维修</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="6">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>客人</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="6-1">在住客人</el-menu-item>
                                <el-menu-item index="6-2">客人档案</el-menu-item>
                                <el-menu-item index="6-3">黑名单</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }
</style>
<script>
    export default {
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSelect(key, keyPath){
                switch(key){
                    case '1':
                        this.$router.push('/Page1');
                        break;
                    case '2':
                        this.$router.push('/res')
                        break;
                    case '5-1':
                        this.$router.push('/room')
                        break;
                    case '5-2':
                        this.$router.push('/clean')
                        break;
                    case '5-3':
                        this.$router.push('/maintion')
                        break;
                    case '6-1':
                        this.$router.push('/online')
                        break;
                }
            },
        }
    }
</script>
